<template>
  <div class="container">
    活动名称:<el-input
      size="small"
      clearable
      @clear="getactuveList"
      v-model="activityNameSearch"
      placeholder="请输入学校名称"
      style="width: 16%; margin: 0 10px"
    ></el-input>
    <el-button
      size="small"
      type="primary"
      style="margin-bottom: 20px"
      @click="getactuveList"
      >查询</el-button
    >
    <el-button
      size="small"
      type="primary"
      @click="addactuve"
      style="margin-bottom: 20px; float: right"
      >添加活动<i class="el-icon-circle-plus-outline"></i
    ></el-button>
    <el-table
      v-loading="isLoading"
      :data="tableData"
      style="width: 100%"
      :row-class-name="xxxTableRowClassName"
      :header-cell-style="{
        background: 'rgba(61,157,255,0.05)',
        color: '#333333',
      }"
    >
      <el-table-column
        prop="activityName"
        label="活动名称"
        width="width"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="activityType"
        label="活动类型"
        width="width"
        align="center"
      >
        <template slot-scope="scope">
          {{
            scope.row.activityType == "1"
              ? "社团活动"
              : scope.row.activityType == "2"
              ? "学院特色体育"
              : scope.row.activityType == "3"
              ? "体育比赛"
              : scope.row.activityType == "4"
              ? "其他活动"
              : "其他"
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="activityContent"
        label="活动内容"
        width="width"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="className"
        label="参与对象"
        width="width"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.className && scope.row.className.length ? scope.row.className.toString() :"全部" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="userName"
        label="打卡时间段"
        width="width"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.beganTime }} - {{ scope.row.closeTime }}
        </template>
      </el-table-column>

      <el-table-column
        prop="activityState"
        label="活动状态"
        width="width"
        align="center"
      >
        <template slot-scope="scope">
          <span
            :style="{
              color:
                scope.row.activityState == 0
                  ? '#666'
                  : scope.row.activityState == 1
                  ? '#1890FF'
                  : '#FF1818',
            }"
          >
            {{
              scope.row.activityState == "0"
                ? "进行中"
                : scope.row.activityState == "1"
                ? "不在活动时间内"
                : "不在活动时间内"
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="activityCode"
        label="二维码"
        width="width"
        align="center"
      >
        <template slot-scope="scope">
          <el-image
            @click.stop="handleClickItem"
            style="width: 50px; height: 50px"
            :src="scope.row.activityCode"
            :preview-src-list="[scope.row.activityCode]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="width" align="center">
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            size="small"
            plain
            @click="compile($event, row)"
            >编辑</el-button
          >

          <!-- <el-button
            type="danger"
            size="small"
            plain
            @click="delactuve($event, row)"
            >删除</el-button
          > -->
          <el-button
            type="primary"
            size="small"
            plain
            @click="done($event, row)"
            >下载二维码</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="form.actuveId ? '修改活动' : '添加活动'"
      :visible.sync="dialogFormVisible"
      width="700px"
      :close-on-click-modal="false"
    >
      <el-form
        label-position="left"
        :model="form"
        :rules="rules"
        ref="ruleForm"
        label-width="140px"
      >
        <el-form-item label="活动名称:" prop="activityName">
          <el-input v-model="form.activityName" style="width: 70%"></el-input>
        </el-form-item>
        <el-form-item label="活动类型:" prop="activityType">
          <el-radio-group v-model="form.activityType">
            <el-radio label="1">社团活动</el-radio>
            <el-radio label="2">学院特色体育</el-radio>
            <el-radio label="3">体育比赛</el-radio>
            <el-radio label="4">其他活动</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动内容:" prop="activityContent">
          <el-input
            type="textarea"
            v-model="form.activityContent"
            style="width: 70%"
          ></el-input>
        </el-form-item>
        <el-form-item label="打卡日期:" prop="starttime">
          <el-date-picker
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            v-model="form.starttime"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="打卡时间段:" prop="time">
          <el-time-picker
            value-format="HH:mm:ss"
            is-range
            v-model="form.time"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          >
          </el-time-picker>
        </el-form-item>

        <el-form-item label="参与对象:" prop="classIds">
          <el-checkbox-group v-model="form.classIds">
            <el-checkbox
              :label="item.pscId"
              :key="item.pscId"
              v-for="item in classSource"
            >
              {{ item.scName + item.pscName }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="是否开启:" prop="activityState">
          <el-switch
            v-model="form.activityState"
            active-value="0"
            :inactive-value="'1'"
            active-color="#13ce66"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false"
          >取 消</el-button
        >
        <el-button :loading="disable" size="small" type="primary" @click="save"
          >{{ disable ? "加载中" : "确 定" }}
        </el-button>
      </div>
    </el-dialog>

    <pagination-page @size="changeSize" @page="changePage" :total="total" />
  </div>
</template>

<script>
import { activityList, addactivity } from "@/api/active/index.js";
import { classSimList } from "@/api/conmmon";
import Decrypt from "@/utils/Decrypt";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          const today = new Date().setHours(0, 0, 0, 0); // 获取今天的日期，不包括时间部分
          const selected = new Date(time).setHours(0, 0, 0, 0); // 获取选中日期，不包括时间部分
          return selected < today; // 判断选中日期是否小于今天
        },
      },
      value: "",
      checkList: "",
      disable: false,
      total: -1,
      loading: false,
      page: {
        pageSize: 10,
        pageNumber: 1,
      },
      dialogFormVisible: false,
      tableData: [],
      classSource: [],
      activityNameSearch: "",
      form: {
        activityType: "",
        activityName: "",
        classIds: [],
        activityContent: "",
        activityState: false,
        activityId: "",
        starttime: "",
        time: [],
      },
      rules: {
        activityName: [
          {
            required: true,
            message: "请输入学校名称",
          },
        ],
        activityType: [
          {
            required: true,
            message: "请选择活动类型",
          },
        ],
        activityContent: [
          {
            required: true,
            message: "请输入活动内容",
          },
        ],
        starttime: [
          {
            required: true,
            message: "请选择日期",
          },
        ],
        time: [
          {
            required: true,
            message: "请选择打卡时间段",
          },
        ],
        activityState: [
          {
            required: true,
            message: "请选择是否开启",
          },
        ],
      },
      isLoading: false,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getactuveList();
    this.getClassSource();
  },
  filters: {
    formatPhone(val) {
      let array = Decrypt(val).split("");
      array.splice(3, 4, "****");
      let result = array.join("");
      return result;
    },
  },
  mounted() {},
  methods: {
    getClassSource() {
      this.loading = true;
      classSimList({
        userId: this.$store.state.user.USER_INFO.id,
        pscShId: this.$store.state.user.USER_INFO.pscShId,
      }).then((response) => {
        this.loading = false;
        if (response.code === 200) {
          if (response.result.length) {
            this.classSource = response.result;
          } else {
            this.$message.error("您目前没有班级,请联系管理员添加");
          }
        }
      });
    },
    handleClickItem() {
      this.$nextTick(() => {
        let domImageMask = document.querySelector(".el-image-viewer__mask"); // 获取遮罩层dom
        if (!domImageMask) {
          return;
        }
        domImageMask.addEventListener("click", () => {
          // 点击遮罩层时调用关闭按钮的 click 事件
          document.querySelector(".el-image-viewer__close").click();
        });
      });
    },
    //获取活动列表
    getactuveList() {
      let data = {
        createUser: this.$store.state.user.USER_INFO.id,
        pageNumber: 1,
        pageSize: 10,
        activityName: this.activityNameSearch,
      };
      this.isLoading = true;
      activityList(data).then((res) => {
        if (res.code == 200) {
          this.tableData = res.result;
          this.total = res.total;
          this.isLoading = false;
        }
      });
    },
    //添加活动
    addactuve() {
      this.dialogFormVisible = true;
      (this.form = {
        activityType: "",
        activityName: "",
        classIds: [],
        activityContent: "",
        activityState: false,
      }),
        this.$nextTick(() => {
          this.$refs.ruleForm.clearValidate();
        });
    },
    //编辑活动
    compile(evt, row) {
      let target = evt.target;
      if (target.nodeName == "SPAN") {
        target = evt.target.parentNode;
      }
      target.blur();
      this.dialogFormVisible = true;
      this.form = { ...row };
      this.$set(this.form, "time", [this.form.beganTime, this.form.closeTime]);
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate();
      });
    },
    save() {
      // 对所有表单项进行统一校验
      this.$refs["ruleForm"].validate(async (valid) => {
        let data = {
          ...this.form,
          createUser: this.$store.state.user.USER_INFO.id,
          beganTime: this.form.time ? this.form.time[0] : "",
          closeTime: this.form.time ? this.form.time[1] : "",
        };
        // console.log(this.form)
        console.log(data,"Data")
        if (valid) {
          this.disable = true;
          addactivity(data).then((res) => {
            if (res.code === 200) {
              this.dialogFormVisible = false;
              this.getactuveList();
              this.$message.success("保存成功");
              this.disable = false;
            } else {
              this.disable = false;
              this.dialogFormVisible = false;
              this.$message.error(res.message);
            }
          });
        } else {
          return false;
        }
      });
    },
    xxxTableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "statistics-warning-row";
      } else {
        return "";
      }
    },
    changeSize(size) {
      this.page.pageSize = size;
      this.getactuveList();
    },
    changePage(page) {
      this.page.pageNumber = page;
      this.getactuveList();
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-table__row.statistics-warning-row {
  background: rgba(61, 157, 255, 0.05);
}
::v-deep .el-upload-list__item {
  display: none;
}
::v-deep .el-form-item__label {
  padding-left: 40px;
}
</style>


::v-deep .el-upload-list__item {
  display: none;
}
::v-deep .el-form-item__label {
  padding-left: 40px;
}
</style>
